<template>
    <div>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="序号" prop="id">
				<el-input disabled v-model="form.id"></el-input>
			</el-form-item>
			<el-form-item label="项目编号" prop="project_id">
				<el-input disabled v-model="form.project_id"></el-input>
			</el-form-item>
			<el-form-item label="样品编号" prop="sample_id">
				<el-input disabled v-model.number="form.sample_id"></el-input>
			</el-form-item>
			<el-form-item label="样品名称" prop="sample_name">
				<el-input disabled v-model="form.sample_name"></el-input>
			</el-form-item>
			<el-form-item label="批号" prop="lot_number">
				<el-input disabled v-model="form.lot_number"></el-input>
			</el-form-item>
			<el-form-item label="原始规格" prop="size">
				<el-input disabled v-model="form.size"></el-input>
			</el-form-item>
			<el-form-item label="领用量" prop="lot_number">
				<el-input disabled v-model.number="form.receipt_amount"></el-input>
			</el-form-item>
			<template v-if="props.form.dflag === 0">
				<template v-if="props.form.receipt_amount===0">
					<el-form-item label-width="120px" label="样品分装退回？">
						<el-switch disabled v-model="rflag" active-text="是 (领用量为0，无法分装退回)" inactive-text="否" />	
					</el-form-item>
				</template>
				<template v-else>
					<el-form-item label-width="120px" label="样品分装退回？">
			 			<el-switch v-model="rflag" active-text="是" inactive-text="否" />	
					</el-form-item>
				</template>
				<template v-if="rflag===false">
					<el-form-item label="原始退回量" prop="return_amount">
						<el-input-number v-model="form.return_amount" :precision="2" :step="0.5" min='0' :max='form.receipt_amount'></el-input-number>
					</el-form-item>
				</template>
				<template v-else-if="rflag===true">
					<el-form-item label="分装编号" prop="sample_id">
						<el-input disabled v-model.number="form.receipt_amount"></el-input>
					</el-form-item>
					<el-row>
						<el-col :span='10'>
							<el-form-item label="分装数量" prop="disp_amount">
								<el-input-number v-model="form.disp_amount" :precision="2" :step="0.5" min='0'></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span='14'>
							<el-form-item label="分装规格" prop="disp_size">
								<el-input v-model="form.disp_size"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="备注" prop="disp_info">
						<el-input v-model="form.extra_infos" type="textarea"></el-input>
					</el-form-item>
				</template>
			</template>
			<template v-else>
				<el-form-item label="分装退回量" prop="disp_amount">
					<el-input-number v-model="form.return_amount" :precision="2" :step="0.5" min='0' :max='form.receipt_amount'></el-input-number>
				</el-form-item>
			</template>
			<el-form-item>
				<el-button type="primary" @click="saveEdit(formRef)" >保 存</el-button>
				<el-button type="warning" @click="onReset(formRef)" >重 置</el-button>
			</el-form-item>
		</el-form>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus';
import useService from '../../hooks/Service/useService'
import { ref,reactive } from 'vue';

const rflag=ref(false)
const props = defineProps({
	form: {
		type: Object,
		required: true
	},
	edit: {
		type: Boolean,
		required: false
	},
	update: {
		type: Function,
		required: true
	}
});

const defaultData = {
	id: '',
	sample_id: '',
	lot_number: '',
	sample_name: '',
	transport: '',
	return_amount: 0,
	project_id: '',
	rflag: false
};

const form = ref({ ...(props.edit ? props.form : defaultData) })
const rules: FormRules = {
	id: [{ required: true, message: '编号', trigger: 'blur' }],
	sample_id: [{ required: true, message: '样品编号不能为空！', trigger: 'blur' }],
	sample_name: [{ required: true, message: '样品名称不能为空！', trigger: 'blur' }],
	lot_number: [{ required: true, message: '批号不能为空！', trigger: 'blur' }],
	disp_amount: [{ required: true, message: '批号不能为空！', trigger: 'blur' }],
	size: [{ required: true, message: '规格不能为空！', trigger: 'blur' }],
	project_id: [{ required: true, message: '项目编号不能为空！', trigger: 'blur' }],
	return_amount: [{ required: true, message: '剩余量不能为空！', trigger: 'blur'}],
	// disp_info:[{ required: true, message: '剩余量不能为空！', trigger: 'blur'}]
};

const formRef = ref<FormInstance>();
const saveEdit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(valid => {
		if (!valid) return false;
		if(form.value.dflag === 0){
			if(rflag.value === true){
				form.value.return_amount = form.value.disp_amount
			}else if(rflag.value === false){
			}	
			form.value.rflag = rflag.value	
		}else if(form.value.dflag === 1){
			form.value.rflag = true
		}
		props.update(form.value);
		ElMessage.success('保存成功！');
	});
};

const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};



</script>

<style scoped>
.el-input-number {
	width: 200px;
}
.el-row {
	margin-bottom: 4px
}
</style>
